import React, { useState } from 'react';
import type { SymbolCategory, FormulaSymbol } from '../../types';
import {
  getAllCategories,
  categoryDisplayNames,
  getSymbolsByCategory
} from '../../utils/formulaUtils';
import './SymbolToolbar.css';

interface SymbolToolbarProps {
  onSymbolSelect: (latex: string) => void;
}

/**
 * 符号工具栏组件 - 提供各种数学符号供用户选择插入
 */
export const SymbolToolbar: React.FC<SymbolToolbarProps> = ({ onSymbolSelect }) => {
  const [, setActiveCategory] = useState<SymbolCategory>('basic');
  const [expandedCategories, setExpandedCategories] = useState<Set<SymbolCategory>>(new Set(['basic']));

  const categories = getAllCategories();

  /**
   * 切换分类展开状态
   */
  const toggleCategory = (category: SymbolCategory) => {
    setExpandedCategories(prev => {
      const newExpanded = new Set(prev);
      if (newExpanded.has(category)) {
        newExpanded.delete(category);
      } else {
        newExpanded.add(category);
      }
      return newExpanded;
    });
    setActiveCategory(category);
  };

  /**
   * 处理符号点击
   */
  const handleSymbolClick = (symbol: FormulaSymbol) => {
    onSymbolSelect(symbol.latex);
  };

  /**
   * 获取分类图标
   */
  const getCategoryIcon = (category: SymbolCategory): string => {
    const icons: Record<SymbolCategory, string> = {
      basic: '➕',
      functions: 'f(x)',
      matrix: '⎡⋯⎤',
      integral: '∫',
      greek: 'α',
      chemistry: 'H₂O'
    };
    return icons[category] || '⚙️';
  };

  return (
    <div className="symbol-toolbar">
      <div className="toolbar-header">
        <h3>符号工具栏</h3>
      </div>
      
      <div className="toolbar-content">
        {categories.map(category => {
          const symbols = getSymbolsByCategory(category);
          const isExpanded = expandedCategories.has(category);
          
          return (
            <div key={category} className="symbol-category">
              <div 
                className={`category-header ${isExpanded ? 'expanded' : ''}`}
                onClick={() => toggleCategory(category)}
              >
                <span className="category-icon">{getCategoryIcon(category)}</span>
                <span className="category-name">{categoryDisplayNames[category]}</span>
                <span className={`category-arrow ${isExpanded ? 'expanded' : ''}`}>
                  ▼
                </span>
              </div>
              
              {isExpanded && (
                <div className="category-symbols">
                  {symbols.map((symbol, index) => (
                    <button
                      key={`${category}-${index}`}
                      className="symbol-button"
                      title={symbol.description || symbol.label}
                      onClick={() => handleSymbolClick(symbol)}
                      aria-label={`插入${symbol.description || symbol.label}`}
                    >
                      <span className="symbol-label">{symbol.label}</span>
                    </button>
                  ))}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default SymbolToolbar;